.vue-topology {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;

  .topology-canvas {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: default;

    .nodes-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;

      .node {
        position: absolute;
        border: 1px solid #ccc;
        border-radius: 4px;
        pointer-events: all;
        transition: all 0.2s;
        user-select: none;

        &.selected {
          border-color: #1890ff;
          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        .node-content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 0 8px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .anchor {
          position: absolute;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: #fff;
          border: 1px solid #1890ff;
          transform: translate(-50%, -50%);
          cursor: crosshair;
          display: none;

          &.active {
            background-color: #1890ff;
          }
        }

        &:hover .anchor {
          display: block;
        }
      }
    }

    .edges-container {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: all;
    }
  }
}